<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <navBar
      id="topWrap"
      ref="navBar"
      :custom-els="customEls"
      :search-disabled="false"
      :key-words-default="templateKeyWords"
      @stringAutoListShowFn="stringAutoListShowFn"
      @setHistoryKeywordFn="setHisrorySearchWordFn"
    />
    <view v-if="!stringAutoShowVisible" class="class-content">
      <template
        v-if="vuex_historySearchWord.length>0"
      >
        <view class="custom-title">
          历史搜索
          <text
            class="delete-icon font_family icon-delete_tongyong_3"
            @click="deleteHistoryFn"
          />
        </view>
        <view class="clearfix">
          <view
            v-for="(listItem,listIndex) in vuex_historySearchWord"
            :key="listIndex"
            class="class-item uni-ellipsis-1"
            @click="searchFn(listItem)"
          >
            {{ listItem }}
          </view>
        </view>
      </template>
      <template v-if="hotSearchWords.length > 0">
        <view class="custom-title hot-work-title">
          热门搜索
          <image class="hot-icon" src="/static/shopIcon/hot.png" />
        </view>
        <view class="clearfix">
          <view
            v-for="(listItem,listIndex) in hotSearchWords"
            :key="listIndex"
            class="class-item uni-ellipsis-1"
            @click="searchFn(listItem.keyword)"
          >
            {{ listItem.keyword }}
          </view>
        </view>
      </template>
    </view>
    <view v-if="stringAutoShowVisible" class="associative-search" :style="'height:'+contentHeight+'px'">
      <AssociativeSearch
        :string-auto-list="stringAutoList"
        @searchFn="searchFn"
      />
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page'
import navBar from '@/components/navBar'
import AssociativeSearch from '@/search/associative-search';
import {
  searchResourceConf
} from '@/search/commonDataRequest';
import { hideHomeBtn } from '@/common/common'
import { setPlatformFn } from '@/common/ycCommon'
export default {
  components: {
    basePage,
    navBar,
    AssociativeSearch,
  },
  data() {
    return {
      title: 'Search',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      customEls: ['search'],
      contentHeight: 0,
      stringAutoList: [],
      stringAutoShowVisible: false,
      hotSearchWords: [],
      templateKeyWords: ''
    }
  },
  onLoad(option) {
    this.templateKeyWords = option.keyWords;
  },
  mounted() {
    this.getTopHeight()
    this.searchResourceConfFn()
    hideHomeBtn()
  },
  methods: {
    stringAutoListShowFn(data, listShow) {
      this.stringAutoList = data
      this.stringAutoShowVisible = listShow
    },
    /*热搜词查询*/
    async searchResourceConfFn() {
      const platform = setPlatformFn(this.vuex_memberInfo) || 20
      /* 账户类型：10:签约用户；20:普通用户;30认证用户;39普通会员-分销;40分销用户；*/
      /*if (this.vuex_memberInfo && this.vuex_memberInfo.length > 0) {
        switch (Number(this.vuex_memberInfo.accountType)) {
          case 10:
            platform = 10
            break
          case 20:
            platform = 20
            break
          case 30:
            platform = 20
            break
          case 39:
            platform = 30
            break
          case 40:
            platform = 30
            break
          default:
            platform = 20
            break
        }
      }*/
      const params = {
        platform: platform,
        categoryIds: '9', //传8 是默认搜索词 传9 是热搜词 也可以一起传 "8,9" 这样
        status: 101,
        warehouse_code: this.vuex_cityInfo.warehouseCode,
      }
      this.hotSearchWords = await searchResourceConf(params)
    },
    searchFn(keyword, requestId) {
      this.setHisrorySearchWordFn(keyword)
      uni.navigateTo({
        url: `/productList/productList/index?title=${keyword}&queryString=${keyword}&requestId=${requestId}`
      });
    },
    /* 历史搜索
    * 记录最新20次搜索关键字*/
    setHisrorySearchWordFn(keyword) {
      const historySearchWord = this.vuex_historySearchWord
      const curHistoryWordIndex = historySearchWord.indexOf(keyword)
      const historyListLength = historySearchWord.length
      if (curHistoryWordIndex > -1) {
        historySearchWord.splice(curHistoryWordIndex, 1)
      } else {
        if (historyListLength >= 20) {
          historySearchWord.splice(historyListLength - 1, 1)
        }
      }
      historySearchWord.unshift(keyword)
      this.$u.vuex('vuex_historySearchWord', historySearchWord);
    },
    /*删除历史搜索记录*/
    deleteHistoryFn() {
      this.$u.vuex('vuex_historySearchWord', []);
    },
    getTopHeight() {
      var windowHeight = this.vuex_systemInfo[1].screenHeight
      this.contentHeight = windowHeight - this.vuex_systemInfo[1].safeArea.top - 44
    },
  },
}
</script>

<style lang="scss">
.class-content{
  padding: 32rpx 32rpx 0 32rpx;
  .class-item{
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    padding: 0 24rpx;
    float: left;
    margin: 22rpx 16rpx 0 0;
    border-radius:$uni-border-radius-default;
    background: $uni-bg-color;
    font-size: $uni-font-size-sm;
  }
  .hot-icon{
    width: 32rpx;
    height: 32rpx;
    margin: 0 8rpx;
    position: relative;
    top: 4rpx;
  }
  .hot-work-title{
    margin-top: 32rpx;
  }
  .delete-icon{
    font-size: 32rpx;
    margin: 0 8rpx;
    position: relative;
    float: right;
    font-weight: normal;
    color: $uni-text-color-tips;
  }
}
.associative-search{
  width: 100%;
  margin-top: -20rpx;
  background: $uni-bg-color;
}
</style>
